<template>
  <div>
    <nuxt-link 
      :to="'/article/'+$props.articleInfo.filePath" 
      class="article-link">
      <h3 class="article-title">{{ $props.articleInfo.title }}</h3>
    </nuxt-link>
    <span class="article-date">发布日期：{{ $props.articleInfo.updatedAt }}</span>
    <span 
      v-for="tag in $props.articleInfo.tags" 
      :key="tag" 
      class="article-tag"
      @click ="selectTag">{{ tag }}</span>
    <div style="clear:both;"/>
    <p class="article-desc">{{ $props.articleInfo.preview }}...</p>
  </div>
</template>

<script>
export default {
  props: {
    articleInfo: {
      type: Object,
      default: function() {
        return {
          ID: 1,
          FilePath: 'go-vscode1',
          Title: 'Go语言开发环境配置(VSCode)1',
          Preview:
            '配置Go语言时遇到一些坑，特别是VSCode中Go工具包的安装及相关的科学上网知识，查了很多资料都描述不清晰，可能是我认为是难点的内容在别人那里是不需要说明的基础吧。其实只要科学上网配置完成，VSCode中安装工具包超级简单，对，是超级简单。好像本文标题不对？应该叫“Go语言工具包安装”？好吧，我在这里是把Go的环境变量等配置当作不需要说明的基础了，那些东东网上很多，我在本文略过了:)',
          CreatedAt: '2018-10-01 12:23:33',
          UpdatedAt: '2018-10-01 12:23:33',
          Tags: ['javascript', 'node']
        }
      }
    }
  },
  methods: {
    selectTag(event) {
      // this.curPageNo = +event.target.innerHTML;
      // this.articleData.articleList = [];
      this.$router.push({ path: '/list/' + event.target.innerHTML + '/1' })
    }
  }
}
</script>

<style scoped>
.article-link {
  text-decoration: none;
}
.article-title {
  /* color: #4385F6; */
  color: #f2f2f2;
}
.article-date {
  font-size: 14px;
  color: gray;
}
.article-tag {
  font-size: 14px;
  float: right;
  border: 1px #1d1f21 solid;
  border-radius: 5px;
  display: inline-block;
  padding: 0 5px;
  margin-right: 10px;
  color: gray;
}

.article-tag:hover {
  border: 1px burlywood solid;
  color: burlywood;
}
.article-desc {
  /* color: #c4c4c4; */
  /* color: rgb(185, 154, 113); */
  color: #c5c8c6;
  margin-bottom: 20px;
}
</style>
